import axios from "axios";
import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";

export const Enrollment = () => {
  const userId = window.localStorage.getItem("userId");
  const [enrollments, setEnrollments] = useState([]);
  const navigate = useNavigate();

  //get enrolled modules by userId
  useEffect(() => {
    axios({
      method: "GET",
      headers: { satoken: window.localStorage.getItem("satoken") },
      url: "http://localhost:8080/enrollment/student/" + userId,
    }).then((res) => {
      setEnrollments(res.data["data"]);
    });
  }, [userId]);

  const handleViewModule = (moduleId) => {
    navigate(`/student/module/${moduleId}/listAssignment`);
  };

  return (
    <div className="moduleCard">
      <nav>
        <ul>
          {enrollments.map((item) => {
            return (
              <div id="moduleView" key={item.id}>
                <li><b>{item.code}</b></li>
                <li>{item.name}</li>
                <li>{item.semester}</li>
                <button
                  onClick={() => {
                    handleViewModule(item.id);
                  }}
                >
                  View Assignments
                </button>
              </div>
            );
          })}
        </ul>
      </nav>
    </div>
  );
};
